<template>
	<view>
		 <div class="window" style="position: fixed;width: 100%;height: 100%;top:0px;left: 100000000px;z-index: 999;"></div>
		 <div class="fan windowfan" style="position: fixed;left: 100000000px;top:0px;z-index: 999;"></div>
		 <my-loading :vshow="loadingshow"></my-loading>
		 <uni-popup ref="showvalue">
		  <div :style="{ height: (height)+'px',width: width+'px','background':'#fff'}" >
		   <div  class="fan">
		    <div @click="chou_gz_close" class="fan_left">{{icons.guangbi}}</div>
		    <div class="fan_center">协商内容</div>
		 </div>
		 <scroll-view scroll-y="true" class="gz_value" :style="{ height: (height-heights)+'px'}" >
		   <div class="gz_value_z" :style="{ width: (width-heights)+'px'}"> 
		    
		    <div  v-if="!(ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9)" style="width:100%;display: inline-block;padding-bottom: 20px;border-bottom: 1px solid #eee;">
		       <div class="xietop">
		           <div class="xietop_head">
		            <image
		  src="https://img.yzcdn.cn/vant/cat.jpeg"
		  mode="aspectFill"
		  style="width:100%;height:100%"
		></image>
		           </div>
		           <div class="xietop_right">
		               <div class="xietop_top">卖家</div>
		               <div class="xietop_bottom">2019-08-05 12:23:20</div>
		           </div>
		       </div>
		            <div class="order_infor_value2" style="padding: 0px;height: 20px;width:100%;"> 
		              <div class="order_infor_value_left2" style="padding: 0px;font-size: 14px;color:#000;width:70px;">【标题】：</div>
		              <div v-if="ordervalue.order_state==9" class="order_infor_value_right2" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}">卖家同意退款</div>
		               <div v-else-if="ordervalue.order_state!=9 && ordervalue.remark!='' && ordervalue.remark!=null" class="order_infor_value_right2" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}">卖家拒绝退款</div>
		                <div v-else-if="ordervalue.time<0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_infor_value_right2" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}">卖家未处理</div>
		            </div>
		           
		            <div class="order_infor_value_ma" style="padding: 0px;height: 20px;width:100%;">
		              <div class="order_infor_value_left_ma" style="padding: 0px;font-size: 14px;color:#000;width:70px;">【内容】：</div>
		              <div v-if="ordervalue.order_state==9" class="order_infor_value_right_ma" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}"> {{(ordervalue.remark!=null && ordervalue.remark!='')?ordervalue.remark:'卖家已处理，退款成功！'}}</div>
		              <div v-else-if="ordervalue.order_state!=9 && ordervalue.remark!='' && ordervalue.remark!=null" class="order_infor_value_right_ma" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}"> {{ordervalue.remark}}</div>
		              <div v-else-if="ordervalue.time<0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_infor_value_right_ma" :style="{'padding': '0px','font-size': '14px','color':'#000','width': (width-110)+'px'}">未处理，退款失败！</div>
		            </div>
		            
		  
		    </div>
		
		
		
		
		    <div style="width:100%;display: inline-block;">
		       <div class="xietop">
		           <div class="xietop_head">
		            <image
		  :src="ordervalue.my_head"
		  mode="aspectFill"
		  style="width:100%;height:100%"
		></image>
		           </div>
		           <div class="xietop_right">
		               <div class="xietop_top">{{ordervalue.my_name}}</div>
		               <div class="xietop_bottom">{{ordervalue.refund_time}}</div>
		           </div>
		       </div>
		            <div class=" popvalue"> 
		              <div class=" popvalue_left" >退款类型：</div>
		              <div class=" popvalue_right" >{{ordervalue.refund_state}}</div>
		            </div>
		            <div class=" popvalue">
		              <div class=" popvalue_left">退款金额：</div>
		              <div class=" popvalue_right">￥{{ordervalue.refund_money}}</div>
		            </div>
		            <div class=" popvalue">
		              <div class=" popvalue_left">退款原因：</div>
		              <div class=" popvalue_right">{{ordervalue.refund_why}}</div>
		            </div>
		            <div class="popvalue">
		              <div class="popvalue_left">退款说明：</div>
		              <div class="popvalue_right2" style="display:inline-block"> {{ordervalue.refund_ins}}</div>
		            </div>
		            <div class="popvalue">
		              <div class="popvalue_left">图片凭证：</div>
		            </div>
		            <div v-for="(img,indeximg) in refund_img" :key="indeximg" @click="kan_img(img)" style="width:33.333333%;height: 100px;float: left;"> 
		            <image :src="img" style="width: 100%;height: 100%;" mode="aspectFill"></image>
		            </div>
		 
		    </div>
		
		
		   </div>
		 </scroll-view>
		</div>
		</uni-popup>
		    <!-- 头部 -->
		        <div v-show="!loadingshow" class="order_top">
		           <div class="order_top_left">
		            <div v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_top_left_top">退款中</div>
		            <div v-else-if="ordervalue.order_state!=9" class="order_top_left_top">退款失败</div>
		            <div v-else-if="ordervalue.order_state==9" class="order_top_left_top">退款成功</div>  
		              <div v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_top_left_bottom">
					  <uni-count-down color="#f00" :background-color="icons.color" :border-color="icons.color" :day="ordervalue.day" :hour="ordervalue.hour" :minute="ordervalue.minute" :second="ordervalue.second"></uni-count-down>后会处理
			                                    </div>
		<div v-else-if="ordervalue.order_state!=9 && ordervalue.remark!='' && ordervalue.remark!=null" class="order_top_left_bottom">卖家拒绝退款</div>
		<div v-else-if="ordervalue.time<0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_top_left_bottom">卖家未处理</div>
		           </div>
		           <div class="order_top_right">
		              <div v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_top_right_ra">{{icons.tuikuan}}</div>
		               <div v-else-if="ordervalue.order_state!=9" class="order_top_right_ra3">失败</div>
		               <div v-else-if="ordervalue.order_state==9" class="order_top_right_ra3">完成</div>
		              
		
		         
		              <div v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_top_right_ra2"></div>  
		                 <div  v-else class="order_top_right_ra4"></div>
		           </div>
		        </div>
		<!-- 解说 -->
		          <div v-show="!loadingshow" v-if="ordervalue.order_state==9" class="order_money" style="margin:0px;">
		               <div class="order_money_money" :style="{'height':'40px','background':'#fff'}">
		                  <div class="order_money_money_left" style="line-height: 40px;">退款总金额</div>
		                  <div class="order_money_money_right" :style="{'color':'red','font-size':'22px','line-height':'40px'}">￥{{money.real_money}}</div>
		              </div>
		              <div  class="order_money_money" :style="{'height':'40px','background':'#fff'}">
		                  <div class="order_money_money_left" style="line-height: 40px;">已原路退回</div>
		                  <div class="order_money_money_right" style="line-height: 40px;">￥{{money.real_money}}</div>
		              </div>
		             
		          </div>
		          <div v-show="!loadingshow" v-else class="order_money" style="margin:0px;">
		               <div class="order_money_money" :style="{'height':'40px','background':'#fff'}">
		                  <div v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" class="order_money_money_left" style="line-height: 40px;color:#000;width:94%;">您已成功发起退款申请，请耐心等待答复！</div>
		                  <div v-else class="order_money_money_left" style="line-height: 40px;color:#000;width:94%;">您成功发起退款申请，退款失败了！</div>
		              </div>
		              <div  class="order_money_money" :style="{'height':'40px','background':'#fff'}">
		                  <div class="order_money_money_left" style="line-height: 40px;color:#888;width:94%;font-size: 12px">● 如果卖家拒绝申请退款或未处理，请联系客服协商！</div>
		              </div>
		              <div  class="order_money_money" :style="{'height':'40px','background':'#fff'}">
		                  <div class="order_money_money_left" style="line-height: 40px;color:#888;width:94%;font-size: 12px">● 如给你带不便之处，请您谅解，谢谢！</div>
		              </div>
		             
		          </div>
		<!-- 查看协商 -->
		        <div v-show="!loadingshow" @click="show_off" class="ems_nav">
		          <div class="ems_nav_left" >{{icons.kefu}}</div>
		          <div class="ems_nav_moddie">协商内容</div>
		          <div class="ems_nav_right">{{icons.dayuhao}}</div>
		        </div>
		
		<!-- 订单内容 -->
		        <div v-show="!loadingshow" class="order_value">
		            <div class="order_money_money" style="height: 30px;line-height: 30px;">
		                  <div class="order_money_money_left" style="height: 30px;line-height: 30px;font-size: 16px;color:#000;padding-top: 5px;">退款信息</div>
		              </div>
		           <div v-for="(value,indexs) in order" v-bind:key="indexs" class="order_value_shop"> 
		               <div @click="pro(value.pid)" class="order_value_shop_left">
						 <image :src="cnds+'/upload/pro/'+value.img" style="width: 100%;height: 100%;" mode="aspectFill"></image>
		               </div>
		               <div @click="pro(value.pid)" class="order_value_shop_moddie">
		                  <div class="order_value_shop_moddie_top uni-sl2">{{value.p_name}}</div> 
		                  <div class="order_value_shop_moddie_bottom uni-sl2">{{value.color+'/'+value.size}}</div> 
		               </div>
		               <div class="order_value_shop_right">
		                   <div class="order_value_shop_right_money">￥{{value.p_price}}</div>
		                   <div class="order_value_shop_right_count">x {{value.count}}</div>
		               </div>
		           </div>
		         
		
		           
		
		           <div class="order_money">
		              <div class="order_money_money">
		                  <div class="order_money_money_left">退款原因</div>
		                  <div class="order_money_money_right">{{ordervalue.refund_why}}</div>
		              </div>
		              <div v-if="ordervalue.refund_ins!='' && ordervalue.refund_ins!=null" class="order_money_money">
		                  <div class="order_money_money_left">退款说明</div>
		                  <div class="order_money_money_right uni-sl1">{{ordervalue.refund_ins}}</div>
		              </div>
		              <div class="order_money_money">
		                  <div class="order_money_money_left">商品总价</div>
		                  <div class="order_money_money_right" style="color:red;">￥{{money.shop_money}}</div>
		              </div>
		             
		              <div class="order_money_money">
		                  <div class="order_money_money_left">实付金额</div>
		                  <div class="order_money_money_right" style="color:red;">￥{{money.real_money}}</div>
		              </div>
		             
		               <div class="order_money_money2">
		               	  <div class="order_money_money_san"></div>
		                  <div class="order_money_money_left2">退款金额</div>
		                  <div class="order_money_money_right2" style="color:red;">￥{{money.real_money}}</div>
		              </div> 
		           </div>
		
		        </div>
		        <div v-show="!loadingshow" class="order_infor">
		            <div class="order_infor_value">
		               <div class="order_infor_value_left"><div class="order_infor_value_left_tiao"></div>订单快照信息</div>
		               <div class="order_infor_value_right"></div>
		            </div>
		            <div v-if="ordervalue.message!=null && ordervalue.message!=''" class="order_infor_value_ma">
		              <div class="order_infor_value_left_ma">订单备注</div>
		              <div class="order_infor_value_right_ma">{{ordervalue.message}}</div>
		            </div> 
		            <div class="order_infor_value2">
		              <div class="order_infor_value_left2">订单编号</div>
		              <div class="order_infor_value_right2">{{ordervalue.no}}</div>
		            </div> 
		            <div class="order_infor_value2">
		              <div class="order_infor_value_left2">下单时间</div>
		              <div class="order_infor_value_right2">{{ordervalue.date}}</div>
		            </div>
		            <div v-if="ordervalue.pay_time!=null" class="order_infor_value2">
		              <div class="order_infor_value_left2">支付时间</div>
		              <div class="order_infor_value_right2">{{ordervalue.pay_time}}</div>
		            </div>
		            <div v-if="ordervalue.refund_time!=null" class="order_infor_value2"> 
		              <div class="order_infor_value_left2">申请时间</div>
		              <div class="order_infor_value_right2">{{ordervalue.refund_time}}</div>
		            </div>
		            <div v-if="ordervalue.get_time!=null" class="order_infor_value2"> 
		              <div class="order_infor_value_left2">成交时间</div>
		              <div class="order_infor_value_right2">{{ordervalue.get_time}}</div>
		            </div>
		        </div>
		        <!-- 底部栏 --> 
		        <div v-show="!loadingshow" style="width: 100%;height: 60px;"></div>
		        <div v-show="!loadingshow" class="order_footer">
		        	  <div @click="del_refund(ordervalue.no)" v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" v-bind:click="wxpay(ordervalue.no)"  class="order_footer_wei" :style="{'border-radius': '0px'}">取消申请</div> 
		             
		            <div @click="a_fun('../refund/refund?no='+ordervalue.no+'&xiu=1')"  v-if="ordervalue.time>0 && !(ordervalue.remark!='' && ordervalue.remark!=null) && ordervalue.order_state!=9" v-bind:click="wxpay(ordervalue.no)"  class="order_footer_nei" :style="{'border-radius': '0px','background': 'red',}">修改申请</div>
		
		               <div @click="kef"  class="order_footer_nei">联系客服</div>   
		        </div>
	</view>
</template>

<script>
	var user;
	var user_key;
	var yhpz;
	var _self;
	export default { 
		data() {
			return {
				loadingshow:true,
				name:'上滑',//触摸状态
				icon:'',//图标
				icons:'',
				type:'确认',
				ordervalue:'',
				show_value:false,
				kan_images:false,
				cnds:'',
				refund_img:[],
				index: 1,
				images: [],
				app_z:false,
				order:'',
				width:750,
				height:724,
				heights:90,
				no:'',
				money:{
					shop_money:0,
					score_f:0,
					score_money:0,
					money:0,
					coupon_money:0,
					real_money:0,
			},
			}
		},
		
		onReady(){
			
			_self=this; 
			uni.createSelectorQuery() /* 获取查询节点 */
				.selectAll('.window') /* 获取class(.lazy) */
				.boundingClientRect(images => {
					var arr = [];
					images.forEach((image, index) => {
						this.height = parseInt(image.height);
						this.width = parseInt(image.width);
			
					});
			
				})
				.exec();
				uni.createSelectorQuery() /* 获取查询节点 */
					.selectAll('.windowfan') /* 获取class(.lazy) */
					.boundingClientRect(images => {
						var arr = [];
						images.forEach((image, index) => {
							this.heights = parseInt(image.height);
				
						});
				
					})
					.exec();
			this.icon=uni.getStorageSync('icon');
			this.icons=uni.getStorageSync('icons');
			this.cnds=uni.getStorageSync('CND_key');
			
		},
		onLoad(options) {
			this.no=options.no;
			user=uni.getStorageSync('user');
			user_key=uni.getStorageSync('user_key');
			yhpz=uni.getStorageSync('yhpz'); 
			 this.data_order();
			
		},
		methods: {
			a_fun:function(url){
			uni.navigateTo({
				url:url,
			});	
			},
			del_refund:function(nos){
				uni.showModal({
				    title: '提示',
				    content: '您确定要取消申请吗？',
				    success:  (res)=> {
						if (res.confirm) {
							uni.request({
										 		url: uni.getStorageSync('APP_key') + '/order_date.php',
										 		method: 'POST',
										 		data: {
										 			user:user,
										 			user_key:user_key, 
										 			yhpz:yhpz,
													no:this.no,
													type:'delrefund',
							 		},
							 		header: {
							 			'content-type': 'application/x-www-form-urlencoded'
							 		},
							 		dataType: 'json',
							 	success:(res)=> {
							  if(res.data.id==2){ 
								  uni.showToast({
								      title: '取消成功',
								      duration: 2000
								  });
							  	  setTimeout(function(){
							  	  uni.navigateBack({
							  	  	detail:1
							  	  })
							  	  },1500);
							       
							  }
							  if(res.data.id==3){
							        uni.showToast({
							            title: '取消失败',
							            duration: 2000
							        });
							  }
							
							
							                }
							                   
							                });
						}else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
							
						});
			     
			      
			    },
			kan_img:function(img){
				uni.previewImage({
				            urls:this.refund_img,
							current:img,
				            longPressActions: {
				                itemList: ['发送给朋友', '保存图片', '收藏'],
				                success: function(data) {
				                    //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				                },
				                fail: function(err) {
				                    //console.log(err.errMsg);
				                }
				            }
				        });
			},
			wxpay:function(e){
				
			},
			show_off:function(){//查看协商内容
				this.$refs.showvalue.open();
			},
			chou_gz_close:function(){
				this.$refs.showvalue.close();
			},
			data_order:function(){//请求数据
				uni.request({
							 		url: uni.getStorageSync('APP_key') + '/refund_value_data.php',
							 		method: 'POST',
							 		data: {
							 			user:user,
							 			user_key:user_key, 
							 			yhpz:yhpz,
										no:this.no,
				 		},
				 		header: {
				 			'content-type': 'application/x-www-form-urlencoded'
				 		},
				 		dataType: 'json',
				 	success:(res)=> {
						setTimeout(()=>{
							this.loadingshow=false;
							uni.createSelectorQuery() /* 获取查询节点 */
								.selectAll('.window') /* 获取class(.lazy) */
								.boundingClientRect(images => {
									var arr = [];
									images.forEach((image, index) => {
										this.height = parseInt(image.height);
										this.width = parseInt(image.width);
							
									});
							  
								})
								.exec();
								uni.createSelectorQuery() /* 获取查询节点 */
									.selectAll('.windowfan') /* 获取class(.lazy) */
									.boundingClientRect(images => {
										var arr = [];
										images.forEach((image, index) => {
											this.heights = parseInt(image.height);
								
										});
								
									})
									.exec();
						},1500);
				this.ordervalue=res.data[0];
				this.ordervalue.day=parseInt(((this.ordervalue.time/1000)/(60*60*24)));
				this.ordervalue.hour=parseInt(((this.ordervalue.time/1000)%(60*60*24))/(60*60));
				this.ordervalue.minute=parseInt((((this.ordervalue.time/1000)%(60*60*24))%(60*60))/60);
				this.ordervalue.second=parseInt((((this.ordervalue.time/1000)%(60*60*24))%(60*60))%60);
				this.ordervalue.refund_img.forEach((img,id)=>{
			    this.images.push(this.cnds+'/upload/refund/'+img);
			    this.refund_img.push(this.cnds+'/upload/refund/'+img);
				});
				this.order=res.data;
				for(let i=0;i<res.data.length;i++){
			       this.money.shop_money=((parseInt(this.money.shop_money*100)+parseInt(res.data[i].p_price*100)*parseInt(res.data[i].count))/100);
			        this.money.score_f=this.money.score_f+res.data[i].score*res.data[i].scoref;
			        this.money.score_money=((parseInt(this.money.score_money*100)+parseInt(res.data[i].score*100))/100);
			        this.money.money=((parseInt(this.money.money*100)+parseInt(res.data[i].cash*100))/100);
			        this.money.coupon_money=((parseInt(this.money.coupon_money*100)+parseInt(res.data[i].coupon_money*100))/100);
			       
				}
				 this.money.real_money=((parseInt(this.money.shop_money*100)-(parseInt(this.money.score_money*100)+parseInt(this.money.money*100)+parseInt(this.money.coupon_money*100)))/100);
				
			
			
			
			                }
			                   
			                });
				},
		}
	
	}
</script>

<style lang="scss">
.order_top{
  width:100%;
  height: 120px;  
 background:-webkit-linear-gradient(90deg, rgba($color: $color-all, $alpha: 0.7),rgba($color: $color-all, $alpha: 1.0)); /* Safari 5.1 - 6.0 */
   background:-o-linear-gradient(90deg, rgba($color: $color-all, $alpha: 0.7),rgba($color: $color-all, $alpha: 1.0)); /* Opera 11.1 - 12.0 */
   background:-moz-linear-gradient(90deg, rgba($color: $color-all, $alpha: 0.7),rgba($color: $color-all, $alpha: 1.0)); /* Firefox 3.6 - 15 */
   background:linear-gradient(90deg, rgba($color: $color-all, $alpha: 0.7),rgba($color: $color-all, $alpha: 1.0)); 

}
.order_top_left{
  width:65%;height: 100upx;float: left;padding: 70upx 0px 70upx 5%;
}
.order_top_left_top{
width:100%;height: 30px;line-height: 30px;font-size:$color-size-4;color:$color-red-0;
text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
-webkit-text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
-moz-text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
/* *filter: Glow(color=#fff, strength=1); */
}
.order_top_left_bottom { 
width:100%;height: 20px;line-height: 20px;font-size:$color-size-3;color:$color-red-0;
text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
-webkit-text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
-moz-text-shadow:#fff 2upx 0 0,#fff 0 2upx 0,#fff -2upx 0 0,#fff 0 -2upx 0;
/* *filter: Glow(color=#fff, strength=1); */
}
.order_top_right{
  width:30%;height: 240upx;float: right;
}
.order_top_right_ra3{
  border: 4upx rgba($color: $color-all, $alpha: 1.0) dotted;
  width:160upx;height:160upx;border-radius:160upx;background:#fff;float:right;margin-top:38upx;text-align: center;line-height: 160upx;font-family: iconfont;font-size: $color-sizeicon-10;margin-right:40upx;
}
.order_top_right_ra4{ 
  border: 4upx rgba($color: $color-all, $alpha: 1.0) dotted;
  width:30px;height:30px;border-radius:160upx;background:#fff;float:right;margin-top:-62upx;text-align: center;line-height: 160upx;font-family: iconfont;font-size: $color-sizeicon-10;margin-right:190upx;
}
.order_top_right_ra{
  border: 4upx rgba($color: $color-all, $alpha: 1.0) dotted;
  width:160upx;height:160upx;border-radius:160upx;background:#fff;float:right;margin-top:38upx;text-align: center;line-height: 160upx;font-family: iconfont;font-size: $color-sizeicon-11;margin-right:40upx;
   -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 20s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 20s;
    -webkit-animation: rotate 20s linear infinite;
    -moz-animation: rotate 20s linear infinite;
    -o-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
.order_top_right_ra2{ 
  border: 4upx rgba($color: $color-all, $alpha: 1.0) dotted;
  width:60upx;height:60upx;border-radius:160upx;background:#fff;float:right;margin-top:-62upx;text-align: center;line-height: 160upx;font-family: iconfont;font-size: $color-sizeicon-8;margin-right:95px;
   -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 4s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 4s;
    -webkit-animation: rotatexiao 4s linear infinite;
    -moz-animation: rotatexiao 4s linear infinite;
    -o-animation: rotatexiao 4s linear infinite;
    animation: rotatexiao 4s linear infinite;
}
@-webkit-keyframes rotatexiao{from{-webkit-transform: rotate(360deg)}
    to{-webkit-transform: rotate(0deg)}
}
@-moz-keyframes rotatexiao{from{-moz-transform: rotate(359deg)}
    to{-moz-transform: rotate(0deg)}
}
@-o-keyframes rotatexiao{from{-o-transform: rotate(359deg)}
    to{-o-transform: rotate(0deg)}
}
@keyframes rotatexiao{from{transform: rotate(359deg)}
    to{transform: rotate(0deg)}
}
.ems_nav{
  width:94%;height: 80upx;padding:0upx 3%;background:$color-white-0;border-bottom:2upx solid $color-black-8;border-top:2upx solid $color-black-8;
}
.ems_nav_left{
  width:25px;height: 80upx;float:left;font-family: iconfont;color:$color-black-3;line-height: 80upx;text-align: left;font-size: $color-black-6;
}
.ems_nav_moddie{
  width:50%;height: 80upx;float:left;text-align:left;line-height: 80upx;font-size: $color-size-5;color:$color-black-1;
}
.ems_nav_right{
  width:10%;height: 80upx;float:right;font-family: iconfont;color:$color-black-5;line-height: 80upx;text-align: right;
}
.address_nav{
width:94%;height: 200upx;padding:0px 3% 30upx 3%;background:$color-white-0;
}
.address_nav_left{
width:60upx;height:200upx;float: left;line-height: 200upx;font-family: iconfont;color:$color-black-5;text-align:left;
}
.address_nav_right{
width:80%;height:160upx;padding:20upx 0px;float: left;line-height: 200upx;text-align:center;
}
.address_nav_right_top{
width:100%;height: 60upx;line-height: 60upx;text-align: left;font-size: $color-size-4;color:$color-black-1;
}
.address_nav_right_span{
color:$color-black-5;
}
.address_nav_right_bottom{
  width:100%;line-height: 40upx;text-align: left;font-size: $color-size-4;color:$color-black-1;
}
.order_value{
  background:$bgcolor-white-0;width:100%;margin-top: 5upx;
}
.order_value_shop{
  width:94%;height: 160upx;padding:10px 3% 0upx 3%;
}
.order_value_shop_left{
  width:160upx;height: 160upx;float:left;
}
.order_value_shop_left_img{
  width:160upx;height: 160upx;
}
.order_value_shop_moddie{
  width:50%;height: 160upx;float:left;padding:0px 20upx;
}
.order_value_shop_moddie_top{
  width:100%;line-height:20px;text-align: left;color:$color-black-1;font-size:$color-size-3;
}.order_value_shop_moddie_bottom{
  width:100%;line-height:15px;text-align: left;color:$color-black-6;font-size:$color-size-2;
}
.order_value_shop_right{
  width:20%;height: 160upx;float:right;line-height: 20upx;font-size:$color-size-5;text-align: right;
}
.order_value_shop_right_money{
  width:100%;height: 40upx;float:right;line-height: 40upx;font-size:$color-size-3;text-align: right;color:$color-red-0;
}
.order_value_shop_right_count{
  width:100%;height: 40upx;float:right;line-height: 40upx;font-size:$color-size-3;text-align: right;color:$color-black-5;
}
.order_money{
	width: 100%;margin-top:20upx;
}
.order_money_money{
	width: 94%;height:60upx;padding:0upx 3%;
}
.order_money_money_left{
	width: 50%;height:60upx;float:left;line-height: 60upx;text-align: left;color:$color-black-3;font-size:$color-size-3;
}
.order_money_money_right{
	width: 50%;height:60upx;float:right;line-height: 60upx;text-align: right;color:$color-black-3;font-size:$color-size-3;
} 
.order_money_money2{
	width: 94%;height:80upx;padding:0upx 3%;margin-top:20upx;background:rgba($color: $color-all, $alpha: 0.1);position: relative;
}
.order_money_money_san{
	position: absolute;
    top: -32upx;
    right: 40upx;
    border: 16upx solid;
    border-color: $color-white-0  $color-white-0 rgba($color: $color-all, $alpha: 0.1);
}
.order_money_money_left2{
	width: 50%;height:80upx;float:left;line-height: 80upx;text-align: left;color:$color-black-2;font-size:$color-size-4;
}
.order_money_money_right2{
	width: 50%;height:80upx;float:right;line-height: 80upx;text-align: right;color:$color-red-0;font-size:$color-size-6;
} 
.order_footer{
	width: 100%;
	height: 100upx;
	border-top: 2upx solid $color-black-8;
	background:$bgcolor-white-0;
	position: fixed;
	bottom:0upx;
	left:0upx;
	text-align: right;
	line-height: 100upx;
	display: flex;
	justify-content: flex-end;
}
.order_footer_nei{
	  margin-top:10upx;
    background: $color-all;
    font-size: 30upx;
    color: white;
    float: right;
    height:80upx;
    text-align: center;
    line-height: 80upx;
	padding:0upx 40upx;
	margin-right:20upx;
}
.order_footer_wei{
	  margin-top:10upx;
    background: $color-orange-0;
    font-size: 30upx;
    color: white;
    float: right;
    height:80upx;
    text-align: center;
    line-height: 80upx;
	padding:0upx 40upx;
	margin-right:20upx;
}
.order_infor{
	background:$bgcolor-white-0;width: 100%;padding-bottom:40upx;margin-top:5upx;overflow: auto;
}
.order_infor_value{
	width: 94%;padding:0upx 3%;height: 80upx;
}
.order_infor_value_left_tiao{
	width:2px;height: 30upx;background:$color-all;position: absolute;left:0upx;top:25upx;
}
.order_infor_value_left{
	width: 30%;padding-left:3%;height: 80upx;float: left;line-height:80upx;color:$color-black-1;font-size:$color-size-4;position: relative;
}
.order_infor_value_right{
	width: 60%;height: 80upx;float:left;line-height:80upx;color:$color-black-3;font-size:$color-size-4;
}
.order_infor_value2{
	width: 94%;padding:0upx 3%;height: 60upx;
}
.order_infor_value_left2{
	width: 20%;padding-left:3%;height: 60upx;float: left;line-height:60upx;color:$color-black-3;font-size:$color-size-3;
}
.order_infor_value_right2{
	width: 60%;height: 60upx;float:left;line-height:60upx;color:$color-black-3;font-size:$color-size-3;
}
.order_infor_value_ma{
	width: 94%;padding:0upx 3%;
}
.order_infor_value_left_ma{
	width: 20%;padding-left:3%;float: left;line-height:40upx;color:$color-black-5;font-size:$color-size-5;
}
.order_infor_value_right_ma{
	width: 60%;float:left;line-height:40upx;color:$color-black-5;font-size:$color-size-5;
}
.sheng_money{
	width:100%;height: 80upx;line-height: 80upx;background:$bgcolor-white-0;text-align: right;
}
.sheng_money_span{
	margin-right:40upx;background:$color-black-1;padding:10upx 20upx;border-radius: 200upx;font-size: 24upx;color:$color-white-0;
}


.fan{
  width:100%;height: 100upx;border-bottom:2upx solid $color-black-7;position: relative;background: #fff;
}
.fan_center{
  position: absolute;left:0upx;right:0upx;top:0upx;bottom:0upx;width:200upx;height: 100upx;line-height:100upx;text-align: center;font-size: $color-size-5;margin:auto;
}
.fan_left{
height: 100upx;width: 100upx;font-family: iconfont;font-size: $color-sizeicon-8;text-align:center;line-height: 100upx;color:#111;
}
.gz_value{
  width:100%;margin: auto;
}
.gz_value_z{
margin:auto;
}

.xietop{
  width:100%;height: 120upx;
}
.xietop_head{
  width:80upx;height:80upx;margin:20upx 10upx 20upx 0upx;float: left;border-radius: 100upx;overflow: hidden;
}
.xietop_right{
width:50%;height: 120upx;float: left;
}
.xietop_top{
  height: 40upx;width:100%;line-height:40upx;font-size: $color-size-2;color:$color-black-0;font-weight:800;padding:20upx 0upx 0upx 0upx;
}
.xietop_bottom{
  height: 40upx;width:100%;line-height:40upx;font-size: $color-size-2;color:$color-black-2;padding:0upx 0upx 20upx 0upx;
}

.popvalue{
	display:flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width: 100%;
	line-height: 50upx;
	.popvalue_left{
		height: 50upx;
		width: 150upx;
		line-height: 50upx;
		font-size: $color-size-2;
	}
	.popvalue_right{
		height: 50upx;
		width: 50%;
		line-height: 50upx;
		font-size: $color-size-2;
		color:$color-black-2;
	}
	.popvalue_right2{
		width: 70%;
		line-height: 50upx;
		font-size: $color-size-2;
		color:$color-black-2;
		text-align: justify;
	}
}

</style>
